<template>
  <g v-if="props.role === 'enemy'" fill="#000" :transform="props.transform">
    <rect x="1" y="1" width="1" height="6" />
    <rect x="7" y="1" width="1" height="6" />
    <rect x="2" y="3" width="5" height="2" />
    <rect x="3" y="2" width="3" height="4" />
    <rect x="4" y="1" width="1" height="6" />
    <rect x="3" y="7" width="3" height="1" />
    <rect x="4" y="3" width="1" height="2" fill="#6B0800" />
  </g>
  <path
    v-if="props.role === 'player'"
    fill="#9c4a00"
    d="M1,1 h1 v2 h1 v-1 h1 v-1 h-1 v-1 h3 v1 h-1 v1 h1 v1 h1 v-2 h1 v7 h-1 v-2 h-1 v-2 h-1 v-1 h-1 v1 h-1 v1 h1 v1 h1 v-1 h1 v2 h-1 v1 h-1 v-1 h-1 v-1 h-1 v2 h-1 v-7"
    :transform="props.transform"
  />
</template>

<script setup>
  const props = defineProps({
    transform: {
      type: String,
      default: ''
    },
    role: {
      validator(value, props) {
        return ['enemy', 'player'].includes(value)
      }
    }
  })
</script>

<style lang="scss" scoped>

</style>